<template>
  <div class="app-container" v-loading="listLoading" element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading">
    <!-- main -->
    <div class="main-container">
      <!-- header -->
      <div class="header-box">
        <!-- 查询条件 -->
        <div class="search-box">
          <el-form :inline="true" :model="queryParams" class="demo-form-inline" size="mini">
            <el-form-item class="formitemwidth" label="订单编号:">
              <el-input placeholder="订单编号" style="width: 130px" clearable v-model="queryParams.order_no"></el-input>
            </el-form-item>
            <el-form-item class="formitemwidth" label="门店编号:">
              <el-input placeholder="门店编号" style="width: 130px" clearable v-model="queryParams.order_no"></el-input>
            </el-form-item>
            <el-form-item class="formitemwidth" label="顾客名字:">
              <el-input placeholder="顾客名字"  style="width: 130px" clearable v-model="queryParams.customer_name"></el-input>
            </el-form-item>
            <el-form-item class="formitemwidth" label="顾客手机:">
              <el-input placeholder="顾客手机" style="width: 130px" clearable v-model="queryParams.customer_phone"></el-input>
            </el-form-item>
            <el-form-item label="下单时间" style="width: 350px;">
              <el-date-picker
                value-format="yyyy-MM-dd"
                style="width: 260px;"
                clearable
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                v-model="queryParams.date"
                type="daterange"
                placeholder="请选择日期"
                @change="orderDateChange">
              </el-date-picker>
            </el-form-item>
            <!-- <el-form-item class="formitemwidth">
              <el-input placeholder="关键词检索" suffix-icon="el-icon-search" v-model="queryParams.customer_name"></el-input>
            </el-form-item> -->
            <el-button type="primary" size="mini" @click="queryOrderData" icon="el-icon-search">检索</el-button>
          </el-form>
        </div>
        <!-- 操作按钮 -->
        <div class="operate-box">
          <el-button type="primary" size="mini" @click="showAddModal" icon="el-icon-circle-plus-outline">添加订单</el-button>
        </div>
      </div>
      <!-- table -->
      <div class="table-box">
        <vxe-table
          border
          ref="xTable1"
          max-height="620"
          show-overflow
          size="mini"
          :row-config="{isHover: true}"
          :data="list"
          @cell-click="handleCurrentChange"
          @filter-visible="filterVisibleEvent"
          @filter-change="filterChangeEvent">
          <vxe-column type="seq" title="序号" width="60"></vxe-column>
          <!-- <vxe-column field="index" title="ID" width="60"></vxe-column> -->
          <vxe-column field="order_no" title="订单编号" width="120"></vxe-column>
          <vxe-column field="order_type" title="类型" width="80"></vxe-column>
          <vxe-column field="customer_name" title="客户姓名" width="80"></vxe-column>
          <vxe-column field="customer_phone" title="客户手机号" width="100"></vxe-column>
          <vxe-column field="groom_name" title="新郎名称" width="80"></vxe-column>
          <vxe-column field="groom_phone" title="新郎手机号" width="100"></vxe-column>
          <!-- <vxe-column field="groom_birthday" title="新郎生日" width="150"></vxe-column> -->
          <vxe-column field="bride_name" title="新娘名字" width="80"></vxe-column>
          <vxe-column field="bride_phone" title="新娘手机号" width="100"></vxe-column>
          <!-- <vxe-column field="bride_birthday" title="新娘生日" width="100"></vxe-column> -->
          <vxe-column field="customer_addr" :formatter="formatAddr" title="客户地址" width="200"></vxe-column>
          <vxe-column field="series_name" title="套系名称" width="200"></vxe-column>
          <vxe-column field="type_name" title="拍摄类型" width="100"></vxe-column>
          <vxe-column field="amount_paid" title="已付金额" width="70"></vxe-column>
          <vxe-column field="remaining_amount" title="剩余金额" width="70"></vxe-column>
          <!-- <vxe-column field="customer_service" title="客服人员" width="100"></vxe-column> -->
          <!-- <vxe-column field="order_coupons" title="优惠券" width="100"></vxe-column> -->
          <!-- <vxe-column field="add_car" title="是否配车" width="100"></vxe-column> -->
          <!-- <vxe-column field="referrer" title="推荐人" width="100"></vxe-column> -->
          <vxe-column field="customer_source" title="客户来源" width="80"></vxe-column>
          <vxe-column field="remarks" title="备注" width="110"></vxe-column>
          <!-- <vxe-column field="expected_shooting_month" title="期望拍摄月份" width="100"></vxe-column> -->
          <vxe-column field="creation_time" title="创建时间" width="140"></vxe-column>
          <vxe-column field="modified_time" title="更新时间" width="140"></vxe-column>
        </vxe-table>
      </div>
      <!-- paging -->
      <pagination v-show="total > 0" :total="total" :page="queryParams.pageNum" :limit="queryParams.pageSize" @pagination="queryOrderData" />
    </div>

    <!-- 弹框 -->
    <!-- 编辑订单 -->
    <Modal v-model="showOrderModal" draggable scrollable :mask="false" class-name="kz-dialog" title="XZ2403090056摄化流程排控操作">
      <kzOrder name="dingdan"></kzOrder>
    </Modal>
    <!-- <el-dialog :modal-append-to-body="false" z-index="1000" width="50%" top="8vh" style="" custom-class="kz-dialog" :visible.sync="editOrderModal">
      <kzOrder name="dingdan"></kzOrder>
    </el-dialog> -->
    <!-- 新增 -->
    <el-dialog title="添加订单" width="70%" :visible.sync="addModal">
      <el-form :inline="true" size="small" ref="editFormRef" label-width="100px" :model="editForm" :rules="editFormRules" class="demo-form-inline">
        <el-divider content-position="left">客户信息</el-divider>
        <!-- <el-form-item label="客户:">
          <el-input v-model="editForm.customer_name" style="width: 130px" maxlength="4" placeholder="客户名称"></el-input>
        </el-form-item>
        <el-form-item label="手机:" prop="customer_phone">
          <el-input v-model="editForm.customer_phone" style="width: 130px" maxlength="11" placeholder="客户手机号"></el-input>
        </el-form-item> -->
        <el-form-item label="新娘名称:">
          <el-input v-model="editForm.bride_name" style="width: 130px" maxlength="4" placeholder="新娘名称"></el-input>
        </el-form-item>
        <el-form-item label="新郎名称:">
          <el-input v-model="editForm.groom_name" style="width: 130px" placeholder="新郎名称"></el-input>
        </el-form-item>
        <el-form-item label="新娘手机:" prop="bride_phone">
          <el-input v-model="editForm.bride_phone" style="width: 130px" maxlength="11" placeholder="新娘手机号"></el-input>
        </el-form-item>
        <el-form-item label="新郎手机:" prop="groom_phone">
          <el-input v-model="editForm.groom_phone" style="width: 130px" maxlength="11" placeholder="新郎手机号"></el-input>
        </el-form-item>
        <el-form-item label="新娘生日:">
          <el-date-picker value-format="yyyy-MM-dd" v-model="editForm.bride_birthday" type="date" style="width: 130px;" placeholder="新娘生日"></el-date-picker>
        </el-form-item>
        <el-form-item label="新郎生日:">
          <el-date-picker value-format="yyyy-MM-dd" v-model="editForm.groom_birthday" type="date" style="width: 130px;" placeholder="新郎生日"></el-date-picker>
        </el-form-item>
        <el-form-item label="婚期:">
          <el-date-picker value-format="yyyy-MM-dd" v-model="wedding_day" type="date" style="width: 130px;" placeholder="婚期"></el-date-picker>
        </el-form-item>
        <!-- <el-form-item label="婚期:">
          <el-input v-model="wedding_day" style="width: 130px" placeholder="婚期"></el-input>
        </el-form-item> -->
        <el-form-item label="地域:" style="width: 470px">
          <Cascader :data="options4" style="width: 370px" @on-change="handleAreaChange" />
        </el-form-item>
        <el-form-item label="地址:">
          <el-input v-model="editForm.customer_addr" style="width: 130px" placeholder="地址"></el-input>
        </el-form-item>
        <el-form-item label="备注:" style="width: 36%;">
          <el-input v-model="editForm.remarks" style="width: 100%" placeholder="备注"></el-input>
        </el-form-item>
        <el-divider content-position="left">订单信息</el-divider>
        <el-row>
          <el-form-item label="选择接单点:">
            <el-select v-model="editForm.store_id" @change="storeChange" style="width: 130px;" placeholder="选择接单点">
              <el-option :label="item.store_name"  :value="item.store_id" v-for="item in storeList" :key="item.store_id"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="拍摄类型:">
            <el-select v-model="editForm.type_id" @change="typeChange" style="width: 130px;" placeholder="拍摄类型">
              <el-option :label="item.type_name"  :value="item.type_id" v-for="item in typeList" :key="item.type_id"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="客户来源:">
            <el-select v-model="editForm.customer_source" style="width: 130px;" placeholder="客户来源">
              <el-option label="网络邀约"  value="wangluoyaoyue"></el-option>
              <el-option label="转介绍"  value="zhuanjieshao"></el-option>
              <el-option label="自然入店"  value="ziranrudian"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="订单类型:">
            <el-select ref="orderTypes" v-model="editForm.order_type_id" @change="orderTypeChange" style="width: 130px;" placeholder="订单类型">
              <el-option label="正常"  value="1"></el-option>
              <el-option label="打折"  value="2"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="客服专员:">
            <el-select v-model="editForm.customer_service_id" @change="customerServiceChange" style="width: 130px;" placeholder="客服专员">
              <el-option :label="item.employee_name"  :value="item.employee_id" v-for="item in employeeList" :key="item.employee_id"></el-option>
            </el-select>
          </el-form-item>
        </el-row>
        <el-row>
          <el-form-item label="客资邀约员工:">
            <el-input v-model="kzyyyg" style="width: 130px" placeholder="客资邀约员工"></el-input>
          </el-form-item>
          <el-form-item label="推荐人:">
            <el-input v-model="editForm.referrer" style="width: 130px" placeholder="推荐人"></el-input>
          </el-form-item>
          <el-form-item label="转单员工:">
            <el-input v-model="transfer_employees" style="width: 130px" placeholder="转单员工"></el-input>
          </el-form-item>
          <el-form-item label="推荐老客户:">
            <el-input v-model="recommend_old_customers" style="width: 130px" placeholder="推荐老客户"></el-input>
          </el-form-item>
          <el-form-item label="拍摄分店:">
            <el-select v-model="editForm.store_id" @change="storeChange" style="width: 130px;" placeholder="拍摄分店">
              <el-option :label="item.store_name"  :value="item.store_id" v-for="item in storeList" :key="item.store_id"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="排控组:">
            <el-select v-model="emission_control" style="width: 130px;" placeholder="排控组">
              <el-option label="婚纱拍摄"  value="1"></el-option>
              <el-option label="写真拍摄"  value="2"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="拍摄基地:">
            <el-select v-model="editForm.base_id" style="width: 130px;" placeholder="拍摄基地">
              <el-option :label="item.base_name"  :value="item.base_id" v-for="item in basesList" :key="item.store_id"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="拍摄模式:">
            <el-select v-model="shoot_mode" style="width: 130px;" placeholder="拍摄模式">
              <el-option label="一对一"  value="1"></el-option>
              <el-option label="一对多"  value="2"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="拍摄日期:">
            <el-date-picker value-format="yyyy-MM-dd" v-model="shooting_date" style="width: 130px;" type="date" placeholder="拍摄日期"></el-date-picker>
          </el-form-item>
          <el-form-item label="预计拍摄月份:">
            <el-date-picker value-format="yyyy-MM-dd" style="width: 130px;" v-model="editForm.expected_shooting_month" type="month" placeholder="拍摄月份"></el-date-picker>
          </el-form-item>
          <el-form-item label="选择套系:" style="width: 430px;">
            <el-select v-model="editForm.series_id" @change="seriesChange" style="width: 380px;" placeholder="选择套系">
              <el-option :label="item.series_name"  :value="item.series_id" v-for="item in seriesList" :key="item.series_id"></el-option>
            </el-select>
          </el-form-item>
        </el-row>
        <el-form-item label="订单金额:">
          <el-input v-model="editForm.price" type="number" disabled style="width: 130px" placeholder="订单金额"></el-input>
        </el-form-item>
        <el-form-item label="已付金额:">
          <el-input v-model="editForm.amount_paid" @blur="amount_paidblur" style="width: 130px" placeholder="已付金额"></el-input>
        </el-form-item>
        <el-form-item label="剩余金额:">
          <el-input v-model="editForm.remaining_amount" disabled style="width: 130px" placeholder="剩余金额"></el-input>
        </el-form-item>
        <el-form-item label="服装数量:">
          <el-input v-model="editForm.number_of_costumes" style="width: 130px" placeholder="服装数量"></el-input>
        </el-form-item>
        <el-form-item label="造型数量:">
          <el-input v-model="editForm.number_of_appearances" style="width: 130px" placeholder="造型数量"></el-input>
        </el-form-item>
        <el-form-item label="拍照数量:">
          <el-input v-model="editForm.number_of_shots" style="width: 130px" placeholder="拍照数量"></el-input>
        </el-form-item>
        <el-form-item label="修图数量:">
          <el-input v-model="editForm.number_of_refined" style="width: 130px" placeholder="修图数量"></el-input>
        </el-form-item>
        <el-form-item label="商修数量:">
          <el-input v-model="editForm.number_of_costumes" style="width: 130px" placeholder="服装数量"></el-input>
        </el-form-item>
        <el-row>
          <el-form-item label="选择相册:" style="width: 470px;">
            <el-select v-model="albumid" @change="albumChange" multiple style="width: 380px;" placeholder="选择相册">
              <el-option :label="item.album_name"  :value="item.album_id" v-for="item in albumList" :key="item.album_id"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="选择相框:" style="width: 470px;">
            <el-select v-model="frameid" @change="frameChange" multiple style="width: 380px;"  placeholder="选择相框">
              <el-option :label="item.frame_name"  :value="item.frame_id" v-for="item in frameList" :key="item.frame_id"></el-option>
            </el-select>
          </el-form-item>
        </el-row>
        <el-row>

        </el-row>
        <el-divider content-position="left">其他信息</el-divider>
        <el-form-item label="赠送礼品:">
          <el-select v-model="editForm.free_gift" style="width: 130px;" placeholder="赠送礼品">
            <el-option label="无"  value="无" ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="优惠券:">
          <el-select v-model="editForm.order_coupons" style="width: 130px;" placeholder="优惠券">
            <el-option label="无"  value="无" ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="是否派车:">
          <el-select v-model="editForm.add_car" style="width: 130px;" placeholder="是否派车">
            <el-option label="无"  value="无" ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="婚礼摄影师:">
          <el-select v-model="editForm.order_photographer" style="width: 130px;" placeholder="婚礼摄影师">
            <el-option label=""  value="" ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="婚礼化妆师:">
          <el-select v-model="editForm.order_cosmetician" style="width: 130px;" placeholder="婚礼化妆师">
            <el-option label=""  value="" ></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="addModal = false">取 消</el-button>
        <el-button type="primary" @click="handleAdd">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
// 引入城市数据
import {
  provinceAndCityData,
  provinceAndCityDataPlus,
  regionData,
  regionDataPlus,
  CodeToText,
  TextToCode,
} from "@/components/RegionPicker";
import { truthy } from '@/utils/index.js'
// 引入LimeUtil
import LimeUtil from "@lime-util/util";
import kzOrder from '@/components/kzOrder/index.vue'
// 引入表格数据
import tableColumnsList from '../inline-edit-table/js/tableColumnsList.js'
// 引入api
import {
  getOrder,
  deleteOrder,
  getAllstore,
  getAllType,
  getAllEmployeeByStoreApi,
  getAllBaseApi,
  getAllSeriesByTypeIdApi,
  createOrderApi,
  getAllAlbumApi,
  getAllFrameApi,
  updateOrder
} from "@/api/order/index";
import { getBaseTeamApi, getTaskScheduleApi, addTaskScheduleApi, deleteTaskScheduleApi } from "@/api/paikong/index"
export default {
  components: {
    kzOrder
  },
  props: {
    list: {
      type: Array,
      default: []
    },
    listLoading: {
      type: Boolean,
      default: false
    },
    total: {
      type: Number,
      default: 0
    }
  },
  data() {
    var validatePass = (rule, value, callback) => {
      if (!/^1[3|4|5|6|7|8|9][0-9]{9}$/.test(value)) {
        callback(new Error('请输入正确的手机号'));
      } else {
        if (this.editForm.checkPass !== '') {
          this.$refs.editFormRef.validateField('checkPass');
        }
        callback();
      }
    };
    return {
      addModal: false,
      showOrderModal: false,
      pkModal: false, // 排控变量
      pkSearchName: '',
      filterText: '',
      photoCosmeticianList: [],
      defaultProps: {
        children: 'children',
        label: 'label'
      },
      pkdatevalue: new Date(),
      options4: regionDataPlus,
      // selectedOptions: [],
      queryParams: {
        order_no: '',
        store_id: '',
        state_id: '',
        customer_name: '',
        customer_phone: '',
        creation_time_start: '',
        creation_time_end: '',
        pageIndex: 1,
        pageSize: 10
      },
      keyword: '',
      // 列表分页
      // list: [],
      listQuery: {
        name: "",
        productType: "",
        pageNo: 1,
        pageSize: 10,
      },

      // 表格多选和单选
      selectRows: [],
      selectRow: {},

      // 表格列数据
      tableColumns: tableColumnsList,
      storeList: [], // 所有门店
      typeList: [], // 所有拍摄类型
      employeeList: [], // 某个门店的所有销售人员
      basesList: [], // 获取所有的拍摄基地
      seriesList: [], // 所有套系
      albumList: [], // 所有相框
      frameList: [], // 所有相框
      shoot_mode: "", // 拍摄模式
      emission_control: "", // 排控
      shooting_date: "", // 拍摄日期
      wedding_day: "", // 婚期
      kzyyyg: "", // 客资邀约员工
      transfer_employees: "", // 转单员工
      recommend_old_customers: "", // 推荐老客户
      albumid: "", // 相册id
      frameid: "", // 相框id
      // 表单
      editForm: {
        order_id: "",
        store_id: "", // 门店id
        state_name:'下单',
        state_id: 1,
        customer_name: "", // 客户
        customer_phone: "", // 客户电话
        bride_name: "", // 新娘
        bride_phone: "", // 新娘电话
        bride_birthday: "", // 新娘生日
        groom_name: "", // 新郎
        groom_phone: "", // 新郎电话
        groom_birthday: "", // 新郎生日
        customer_region_code: "", // 地域code
        customer_addr: "", // 地址
        remarks: "", // 备注
        base_id: "", // 门店id
        base_name: "", // 门店名称
        store_name: "", // 门店名称
        type_id: "", // 拍摄类型id
        type_name: "", // 拍摄类型名称
        order_type_id: "", // 订单类型id
        order_type: "", // 订单类型
        customer_service_id: "", // 客服销售人员id
        customer_service: "", // 客服销售人员
        expected_shooting_month: "", // 预计拍摄日期
        series_id: "", // 套系id
        series_name: "", // 套系名称
        price: "", // 订单金额
        amount_paid: 0, // 已付金额
        remaining_amount: 0, // 剩余金额
        number_of_costumes: "", // 衣服套数
        number_of_shots: "", // 拍摄张数
        number_of_refined: "", // 衣服套数
        number_of_scenes: "", // 拍摄场景数量
        number_of_appearances: "", // 造型数量
        album_List: "", // 相册列表
        frame_List: "", // 相框列表
        order_photographer: "", // 摄影师
        order_photographer_id: "", // 摄影师id
        order_cosmetician: "", // 化妆师
        order_cosmetician_id: "", // 化妆师id
        free_gift: "无", // 赠送礼品
        order_coupons: "无", // 优惠券
        add_car: "无", // 有无派车
        referrer: "", // 推荐人
        product_factory: "温州制作工厂", // 制作工厂
        product_factory_id: "1", // 制作工厂id
      },
      // 表单校验
      editFormRules: {
        customer_phone: [
          { validator: validatePass, trigger: 'blur' }
        ],
        groom_phone: [
          { validator: validatePass, trigger: 'blur' }
        ],
        bride_phone: [
          { validator: validatePass, trigger: 'blur' }
        ],
      },
      skzactiveflag: 0,
      taskDataList: [],
      pkItem: {},
      task_date: '',
      pk_order_no: '',
      pk_base_id: '',
      pk_team_id: '',
      pk_task_date_start: '',
      pk_task_date_end: '',
      orderSingleData: {}
    };
  },
  watch: {
    filterText(val) {
      console.log(this.$refs.pktree);
      this.$refs.pktree.filter(val);
    },
    orderSingleData(val) {
      this.orderSingleData = val
    }
  },
  provide() {
    orderRowData: this.orderSingleData
  },
  created() {
    if(this.addModal) {
      this.editForm = JSON.parse(sessionStorage.getItem('rowData'))
      this.getStore()
      this.getTypes()
      this.getAllBases()
      this.albumList = this.$store.state.layout.app.albumList;
      this.frameList = this.$store.state.layout.app.frameList;
    }
  },
  beforeDestroy() {
    sessionStorage.removeItem('rowData')
  },
  methods: {
    queryOrderData(data) {
      if (data) {
        this.queryParams.pageIndex = data.page
        this.queryParams.pageSize = data.limit
      }
      this.$emit('queryDatalist', this.queryParams)
    },
    // 格式化地址
    formatAddr(code) {
      console.log('code',code);
      if (code.cellValue) {
        const value = code.cellValue.split(',')
        return CodeToText[value[0]] + '/' + CodeToText[value[1]] + '/' + CodeToText[value[2]]
      }
    },
    handleAreaChange (value) {
      console.log("选择的code数据：", value);
      this.editForm.customer_region_code = Array.from(value).join(',')
      console.log(this.editForm.customer_region_code);
    },
    // 选中表格中的某一行
    handleCurrentChange({row}) {
      console.log(row);
      this.orderSingleData = row
      this.$store.dispatch("layout/app/bcOrderRowData", row);
      this.showOrderModal = true
    },
    filterVisibleEvent ({ column, visible }) {
      console.log(`${column.property} ${visible ? '打开' : '关闭'}筛选面板`)
    },
    filterChangeEvent ({ column }) {
      console.log(`${column.property} 筛选了数据`)
    },
    // 获取所有店铺列表
    getStore() {
      getAllstore().then(res => {
        console.log('获取所有店铺列表', res);
        if (res.rstpCode === '0000') {
          this.storeList = res.data;
        } else {
          this.$Message.error(res.rstpMsg);
        }
      })
    },
    // 得到所有的拍摄类型
    getTypes() {
      getAllType().then(res => {
        console.log('得到所有的拍摄类型', res);
        if (res.rstpCode === '0000') {
          this.typeList = res.data;
        } else {
          this.$Message.error(res.rstpMsg);
        }
      })
    },
    // 获取某个店铺里销售人员
    getAllEmployees() {
      getAllEmployeeByStoreApi({
        store_id: this.editForm.store_id
      }).then(res => {
        console.log('获取某个店铺里销售人员', res);
        if (res.rstpCode === '0000') {
          this.employeeList = res.data;
        } else {
          this.$Message.error(res.rstpMsg);
        }
      })
    },
    // 获取所有的拍摄基地
    getAllBases() {
      getAllBaseApi().then(res => {
        console.log('获取所有的拍摄基地', res);
        if (res.rstpCode === '0000') {
          this.basesList = res.data;
          this.pk_base_id = this.basesList[0].base_id
          this.getBaseTeam(this.basesList[0].base_id)
        } else {
          this.$Message.error(res.rstpMsg);
        }
      })
    },
    // 根据拍摄类型得到所有的系列（套系）
    getAllSeries() {
      getAllSeriesByTypeIdApi({
        type_id: this.editForm.type_id
      }).then(res => {
        console.log('根据拍摄类型得到所有的系列（套系）', res);
        if (res.rstpCode === '0000') {
          this.seriesList = res.data;
        } else {
          this.$Message.error(res.rstpMsg);
        }
      })
    },

    // 重置查询列表
   /* handleReset() {
      this.listQuery = {
        pageNo: 1,
        pageSize: 10,
      };
      this.queryData();
    },
    // 分页
    changePageNo(val) {
      this.listQuery.pageNo = val;
      this.queryData();
    },
    changePageSize(val) {
      this.listQuery.pageSize = val;
      this.queryData();
    }, */
    // 选择门店事件
    storeChange(e) {
      console.log(this.storeList.find(item => item.store_id == e).store_name);
      this.editForm.store_name = this.storeList.find(item => item.store_id == e).store_name
      this.getAllEmployees()
    },
    // 选择拍摄类型事件
    typeChange(e) {
      console.log(this.typeList.find(item => item.type_id == e).type_name);
      this.editForm.type_name = this.typeList.find(item => item.type_id == e).type_name
      this.getAllSeries()
    },
    // 选择某个店铺里销售人员事件
    customerServiceChange(e) {
      console.log(this.employeeList.find(item => item.employee_id == e).employee_name);
      this.editForm.customer_service = this.employeeList.find(item => item.employee_id == e).employee_name
    },
    // 选择相册事件
    albumChange(e) {
      let arr = Array.from(e);
      this.editForm.album_List = arr.join(',')
      console.log(this.editForm.album_List );
    },
    // 选择相框事件
    frameChange(e) {
      let arr = Array.from(e);
      this.editForm.frame_List = arr.join(',')
      console.log(this.editForm.frame_List );
    },
    // 选择某个店铺里销售人员事件
    seriesChange(e) {
      const seriesSelect = this.seriesList.find(item => item.series_id == e)
      console.log(seriesSelect);
      this.editForm.series_name = seriesSelect.series_name
      this.editForm.number_of_appearances = seriesSelect.number_of_appearances
      this.editForm.number_of_costumes = seriesSelect.number_of_costumes
      this.editForm.number_of_refined = seriesSelect.number_of_refined
      this.editForm.number_of_scenes = seriesSelect.number_of_scenes
      this.editForm.number_of_shots = seriesSelect.number_of_shots
      this.editForm.price = seriesSelect.price
      this.editForm.amount_paid = this.editForm.amount_paid ? this.editForm.amount_paid : 0;
      console.log(seriesSelect.price + '-----' + this.editForm.amount_paid);
      this.editForm.remaining_amount = parseFloat(seriesSelect.price) - parseFloat(this.editForm.amount_paid)
      this.editForm.album_List = seriesSelect.album_List
      this.editForm.frame_List = seriesSelect.frame_List
      const alum_list_new = seriesSelect.album_List.split(',')
      this.albumid = alum_list_new.map(item => parseInt(item))
      const frame_list_new = seriesSelect.frame_List.split(',')
      this.frameid = frame_list_new.map(item => parseInt(item))
    },
    // 订单类型事件
    orderTypeChange(e) {
      this.$refs.orderTypes.options.forEach(options => {
        if (options.value == e) {
          this.editForm.order_type = options.label
        }
      })
      console.log(this.editForm.order_type);
    },
    amount_paidblur(e) {
      console.log(e.target.value);
      this.editForm.amount_paid = e.target.value
      if (this.editForm.amount_paid > 0) {
        this.editForm.remaining_amount = parseFloat(this.editForm.price) - parseFloat(this.editForm.amount_paid)
      }
    },
    // 查询条件订单日期处理
    orderDateChange(value) {
      console.log(value);
      if (value) {
        this.queryParams.creation_time_start = value[0]
        this.queryParams.creation_time_end = value[1]
      } else {
        this.queryParams.creation_time_start = ''
        this.queryParams.creation_time_end = ''
      }
    },

    /**
     * 新增和编辑
     */
    showAddModal() {
      this.addModal = true;
      // 需要先设置表单数据为空后，再调用重置表单才会起作用
      this.emission_control = ""
      this.shoot_mode = ""
      this.editForm = {
        order_id: "",
        store_id: "", // 门店id
        state_name:'下单',
        state_id: 1,
        customer_name: "", // 客户
        customer_phone: "", // 客户电话
        bride_name: "", // 新娘
        bride_phone: "", // 新娘电话
        bride_birthday: "", // 新娘生日
        groom_name: "", // 新郎
        groom_phone: "", // 新郎电话
        groom_birthday: "", // 新郎生日
        customer_region_code: "", // 地域code
        customer_addr: "", // 地址
        remarks: "", // 备注
        base_id: "", // 门店id
        base_name: "", // 门店名称
        store_name: "", // 门店名称
        type_id: "", // 拍摄类型id
        type_name: "", // 拍摄类型名称
        order_type_id: "", // 订单类型id
        order_type: "", // 订单类型
        customer_service_id: "", // 客服销售人员id
        customer_service: "", // 客服销售人员
        expected_shooting_month: "", // 预计拍摄日期
        series_id: "", // 套系id
        series_name: "", // 套系名称
        price: "", // 订单金额
        amount_paid: "", // 已付金额
        remaining_amount: "", // 剩余金额
        number_of_costumes: "", // 衣服套数
        number_of_shots: "", // 拍摄张数
        number_of_refined: "", // 衣服套数
        number_of_scenes: "", // 拍摄场景数量
        number_of_appearances: "", // 造型数量
        album_List: "", // 相册列表
        frame_List: "", // 相框列表
        order_photographer: "", // 摄影师
        order_photographer_id: "", // 摄影师id
        order_cosmetician: "", // 化妆师
        order_cosmetician_id: "", // 化妆师id
        free_gift: "无", // 赠送礼品
        order_coupons: "无", // 优惠券
        add_car: "无", // 有无派车
        referrer: "", // 推荐人
        product_factory: "温州制作工厂", // 制作工厂
        product_factory_id: "1", // 制作工厂id
      }
      this.getStore()
      this.getTypes()
      this.getAllBases()
      if (this.$refs.editFormRef) {
        this.$refs.editFormRef.resetFields();
      }
    },
    // 根据基地获取摄化组数据
    getBaseTeam(base_id) {
      getBaseTeamApi({
        base_id: base_id
      }).then(res => {
        console.log('根据基地获取摄化组数据', res);
        if (res.rstpCode === '0000') {
          this.skzactiveflag = 0
          this.photoCosmeticianList = res.data
          const data = res.data
          this.pk_team_id = data[0] && data[0].team_id
          this.getTaskSchedule()
          /* this.$nextTick(() => {
            let map = {}
            data.forEach(item => {
              map = {
                id: item.team_id,
                label: item.team_name,
                children: [{
                  id: `${item.order_photographer_id}`,
                  disabled: true,
                  label: `摄影师：${item.order_photographer_name}`
                },{
                  id: `${item.team_id}-02`,
                  disabled: true,
                  label: `化妆师：${item.order_cosmetician_name}`
                }]
              }
              this.photoCosmeticianList.push(map)
            })
          }) */
        } else {
          this.$Message.error(res.rstpMsg);
        }
      })
    },
    // 查看某个基地的排控列表
    getTaskSchedule() {
      getTaskScheduleApi({
        base_id: this.pk_base_id,
        team_id: this.pk_team_id,
        task_date_start: this.pk_task_date_start,
        task_date_end: this.pk_task_date_end
      }).then(res => {
        console.log('查看某个基地的排控列表', res);
        if (res.rstpCode === '0000') {
          this.taskDataList = res.data
        } else {
          this.$Message.error(res.rstpMsg);
        }
      })
    },
    /** 通过条件过滤节点  */
    filterNode(value, data) {
      console.log(value,data);
      if (!value) return true;
      return data.label.indexOf(value) !== -1;
    },
    // 选择排控组
    handleNodeClick(item,index) {
      this.skzactiveflag = index
      this.pkItem = item
      this.pk_base_id = item.base_id
      this.pk_team_id = item.team_id
      this.getTaskSchedule()
      console.log(item,index);
    },
    // 排控弹框确认按钮
    handlePkBc() {
      addTaskScheduleApi({
        order_no: this.pk_order_no,
        task_date: this.task_date,
        base_id: this.pkItem.base_id,
        base_name: this.pkItem.base_name,
        order_photographer: this.pkItem.order_photographer_name,
        order_photographer_id: this.pkItem.order_photographer_id,
        order_cosmetician: this.pkItem.order_cosmetician_name,
        order_cosmetician_id: this.pkItem.order_cosmetician_id,
        team_id: this.pkItem.team_id,
        team_name: this.pkItem.team_name,
      }).then( res => {
        console.log('添加排控记录', res);
        if (res.rstpCode === '0000') {
          this.pkModal = false
          setTimeout(() => {
            this.$Message.success("添加排控成功");
            updateOrder({
              order_no: this.pk_order_no,
              state_id: '2',
              state_name: '已排控'
            }).then((res) => {
              console.log('排控后更新订单状态');
              this.$emit('queryDatalist', this.queryParams)
            });
          },500)
        } else {
          this.$Message.error(res.rstpMsg);
        }
      })
    },
    // 删除排控信息
    deleteTask() {
      const o = this.taskDataList.find(item => item.task_date == this.task_date)
      console.log(o);
      if (truthy(o)) {
        deleteTaskScheduleApi({
          task_id: o.task_id
        }).then(res => {
          if (res.rstpCode === '0000') {
            this.pkModal = false
            setTimeout(() => {
              this.$Message.success("删除排控成功");
              updateOrder({
                order_no: this.pk_order_no,
                state_id: '1',
                state_name: '未排控'
              }).then((res) => {
                console.log('排控后更新订单状态');
              });
            },500)
          } else {
            this.$Message.error(res.rstpMsg);
          }
        })
      } else {
        this.$message.error('请选择一条排控任务');
      }
    },
    changeTime(date,data) {
      console.log(date,data);
      this.task_date = data.day
    },
    /**
     * 列表行内编辑操作
     */
    // 显示行内编辑
    handleEditLine(row, index) {
      this.list[index].editable = true;
      this.$set(row, "editable", true);
    },
    // 关闭行内编辑
    handleCancelEditLine(row, index) {
      this.list[index].editable = false;
      this.$set(row, "editable", false);
    },
    // 修改订单
    handleSubmitEditLine(row, index) {
      console.log(111, row);
      const rowlist = row
      delete rowlist.editable
      updateOrder(row).then((res) => {
        if (res.rstpCode === '0000') {
          this.$Message.success("修改成功");
          // 修改成功后关闭当前行内编辑
          this.handleCancelEditLine(row, index);
        } else {
          this.$Message.error(res.rstpMsg);
        }
      });
    },

    /**
     * 提交编辑
     */
    handleSubmit() {
      this.$refs.editFormRef.validate((valid) => {
        if (valid) {
          if (this.editForm.id) {
            this.handleUpdate();
          } else {
            this.handleAdd();
          }
        }
      });
    },
    // 新增订单
    handleAdd() {
      this.$refs.editFormRef.validate((valid) => {
        if (valid) {
          createOrderApi(this.editForm).then((res) => {
            console.log('创建订单', res);
            if (res.rstpCode === '0000') {
              this.$Message.success("添加成功");
              this.$emit('queryDatalist', this.queryParams)
              this.addModal = false;
            } else {
              this.$Message.error(res.rstpMsg);
            }
          });
        }
      });
    },
    // 修改
    handleUpdate() {
      this.$refs.editFormRef.validate((valid) => {
        if (valid) {
          updateProduct(this.editForm).then((res) => {
            console.log('');
            if (res.rstpCode === 0) {
              this.$Message.success("修改成功");
              this.$emit('queryDatalist', this.queryParams)
              this.addModal = false;
            } else {
              this.$Message.error(res.message);
            }
          });
        }
      });
    },

    /**
     * 删除
     */
    handleDelete(row) {
      this.$Modal.confirm({
        title: "提示",
        content: "确定删除该条数据吗？",
        closable: true,
        onOk: () => {
          deleteOrder({ order_no: row.order_no }).then((res) => {
            console.log('删除订单', res);
            if (res.rstpCode === '0000') {
              this.$Message.success("删除成功");
              this.$emit('queryDatalist', this.queryParams)
            } else {
              this.$Message.error(res.message);
            }
          });
        },
      });
    },
  },
};
</script>

<style lang="less" scoped>
.modalh3 {
  margin-bottom: 20px;
}
 ::v-deep .el-form--inline .el-form-item__content {
  width: 50% !important;
}
.skzContent {
  line-height: 1.8;
  padding: 8px 10px;
  cursor: pointer;
  box-sizing: border-box;
  border-radius: 4px;
}
.skzactive {
  background-color: aliceblue;
}
</style>
